<template>
  <div class="playBottom">
    <div class="bottomLeft" @click="musicStore.changePlayPop(true)">
      <img
        :src="musicStore.fm ? musicStore.playList[musicStore.playIndx].album.picUrl : musicStore.playList[musicStore.playIndx].al.picUrl"
        :class="musicStore.playReady ? 'img_running' : 'img_paused'" alt="" />
      <div class="musicName">
        <Vue3Marquee :pauseOnHover="true" style="font-size: 18px; width: 180px">{{
            musicStore.playList[musicStore.playIndx].name
        }}<span>--
            {{ musicStore.fm ? musicStore.playList[musicStore.playIndx].artists
                .reduce((a, b) => {
                  return (a += b.name + ",");
                }, "").slice(0, -1)
                : musicStore.playList[musicStore.playIndx].ar
                  .reduce((a, b) => {
                    return (a += b.name + ",");
                  }, "").slice(0, -1)
            }}</span>
        </Vue3Marquee>
      </div>
    </div>
    <div class="bottomRight">
      <div class="paused" @click="paused">
        <Svgview :ion="musicStore.playReady ? '#icon-zanting' : '#icon-bofang'" />
      </div>
      <Svgview ion="#icon-31liebiao" @click='MenuListShow = true' />
    </div>
    <!-- 当前播放菜单▶️ -->
    <van-popup v-model:show="MenuListShow" round :style="{ height: '60%', width: '90%' }" teleport="body">
      <MenuList />
    </van-popup>
  </div>

</template>

<script setup>
import { useMusicStore } from "@/store/store.js";
import Svgview from "@/components/SvgView";
import MenuList from '@/views/components/MenuList'
import { ref } from "vue";
const MenuListShow = ref(false)
const musicStore = useMusicStore();
const paused = () => {
  musicStore.changePlayReady();
};
</script>

<style scoped lang="less">
.playBottom {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  position: fixed;
  border-top: 1px silver solid;

  .bottomLeft,
  .bottomRight {
    display: flex;
    align-items: center;

    .paused {
      .icon {
        margin: 0 5px;
        margin-top: 4px;
      }
    }

    img {
      border-radius: 50%;
      height: 40px;
      width: 40px;
      border: 1px silver solid;
      line-height: 40px;
      margin-left: 20px;
      animation: changeright 6s linear infinite;
    }

    .img_running {
      animation-play-state: running;
    }

    .img_paused {
      animation-play-state: paused;
    }

    .musicName {
      display: flex;
      margin-left: 10px;

      span {
        font-size: 0.2rem;
        color: #a1a1a1;
        margin-right: 40px;
      }
    }
  }
}
</style>
<style>
.van-popup--center {
  transform: translate3d(-50%, -20%, 0);
}
</style>